<template>
  <view class="patient-history-page">
    <!-- 顶部导航栏 -->
    <view class="top-header">
      <view class="header-left" @click="goBack">
        <image
          class="back-icon"
          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E"
          mode="aspectFit"
        ></image>
        <text>返回</text>
      </view>

      <view class="header-center">
        <text class="page-title">查房历史详情</text>
      </view>

      <view class="header-right"></view>
    </view>

    <!-- 患者基本信息卡片 -->
    <view class="patient-info-card">
      <view class="card-header">
        <view class="department-tag">
          <text>{{ patientInfo.department }}</text>
        </view>
        <view class="patient-basic">
          <text class="name">{{ patientInfo.name }}</text>
          <text class="gender-age"
            >{{ patientInfo.gender }} {{ patientInfo.age }}岁</text
          >
        </view>
      </view>

      <view class="info-row">
        <text class="label">住院号:</text>
        <text class="value">{{ patientInfo.admissionNo }}</text>
        <text class="label">主管医生:</text>
        <text class="value">{{ patientInfo.doctor }}</text>
        <text class="label">床号:</text>
        <text class="value">{{ patientInfo.bedNo }}</text>
      </view>
      <view class="info-row">
        <text class="label">诊断:</text>
        <text class="value">{{ patientInfo.diagnosis }}</text>
        <text class="label">主管护士:</text>
        <text class="value">{{ patientInfo.nurse }}</text>
        <text class="label">入院时间:</text>
        <text class="value">{{ patientInfo.admissionTime }}</text>
      </view>
    </view>

    <!-- 年份选择 -->
    <view class="year-selector">
      <picker
        mode="date"
        fields="year"
        :value="selectedYear"
        @change="onYearChange"
      >
        <view class="year-picker">
          <image
            class="calendar-icon"
            src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFD700'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z'/%3E%3C/svg%3E"
            mode="aspectFit"
          ></image>
          <text>{{ selectedYear }}</text>
          <image
            class="arrow-icon"
            src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333333'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E"
            mode="aspectFit"
          ></image>
        </view>
      </picker>
    </view>

    <!-- 查房历史记录列表 -->
    <view class="history-list">
      <view
        class="timeline-item"
        v-for="(record, index) in recordList"
        :key="index"
      >
        <view class="timeline-date">
          <text class="date">{{ record.date }}</text>
          <view class="dot"></view>
        </view>

        <view class="record-card" @click="toggleRecord(index)">
          <view class="record-header">
            <view class="record-info">
              <text class="recorder">提交人：{{ record.recorder }}</text>
              <text class="time">提交时间：{{ record.submitTime }}</text>
            </view>
            <image
              class="expand-icon"
              :class="{ expanded: record.expanded }"
              src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E"
              mode="aspectFit"
            ></image>
          </view>

          <view class="record-content" v-if="record.expanded">
            <view class="content-label">查房记录</view>
            <view class="content-text">{{ record.content }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      patientInfo: {},
      selectedYear: "2025",
      recordList: [
        {
          date: "2024-07-07",
          recorder: "张三",
          submitTime: "2025-07-07 09:00",
          content:
            "患者因\u201c反复上腹痛伴反酸15日，加重伴黑便3天\u201d入院。诊断为胃溃疡伴出血及幽门螺杆菌感染。查房时患者神志清楚，精神较前好转。自诉上腹部隐痛已显著缓解，疼痛评分降至2分。未再出现黑便。昨日已解黄色成形软便。食欲改善，休息检查显示生命体征平稳，腹部平软，双下肢无水肿，肠鸣音正常。回顾辅助检查结果，胃镜证实为胃窦部A1期溃疡伴血肉附着，幽门螺杆菌检测为阳性；大便潜血已转为阴性，血常规提示血红蛋白为115g/L。较入院时稍有下降。考虑与出血有关，目前情况稳定，无需输血，继续合营养补充，抑酸、补铁、补钙治疗后，溃疡出血已基本停止，病情趋于稳定。",
          expanded: true,
        },
        {
          date: "2024-06-15",
          recorder: "李四",
          submitTime: "2025-06-15 14:30",
          content:
            "患者今日查房，主诉上腹痛明显加重，疼痛评分为6分，伴有阵发性绑痛。昨晚出现黑便2次，量中等。食欲不振，仅进流质饮食。体格检查：神志清，精神较差，面色苍白。腹部触诊上腹部压痛明显，无反跳痛和肌紧张。肠鸣音活跃。血常规显示：Hb 98g/L，提示贫血。大便潜血(＋＋＋)。处理：1.禁食，静脉营养支持；2.抗酸抑酸治疗（奥美拉唑）；3.止血药物（泌酸生长抑素）；4.输血治疗；5.严密监测生命体征。",
          expanded: true,
        },
        {
          date: "2024-05-28",
          recorder: "王五",
          submitTime: "2025-05-28 10:15",
          content:
            "患者初次门诊就诊，主诉：间断性上腹部疼痛15天。疼痛多发生于空腹时，进食后可缓解，伴有反酸、嗳气。否认黑便及呕血。既往史：有慢性胃炎病史，未规则治疗。体格检查：神志清楚，营养中等，腹部平软，上腹部轻压痛，无反跳痛。辅助检查：建议行胃镜检查。诊断：消化性溃疡？慢性胃炎。处理：1.预约胃镜检查；2.奥美拉唑 20mg Bid；3.铝碟嘴嘀片 1g Tid；4.饮食调整，忌辛辣刺激性食物。",
          expanded: true,
        },
        {
          date: "2024-05-10",
          recorder: "赵六",
          submitTime: "2025-05-10 16:45",
          content:
            "患者因上腹部不适复诊。主诉：上次就诊后按医嘱服药，上腹部疼痛有所缓解，但近三天症状又有加重。现主要表现为餐后上腹部饱胀感，伴有嘴苦、反酸。体格检查：一般情况尚可，腹部柔软，上腹部轻度压痛。胃镜报告：胃窦部溃疡(A1期)，幽门螺杆菌(＋)。诊断：1.胃溃疡；2.幽门螺杆菌感染。处理：1.四联根除Hp方案（基础方案）；2.继续 PPI 治疗；3.饮食调整，规律作息；4.四周后复诊。",
          expanded: true,
        },
      ],
    };
  },
  onLoad(options) {
    if (options.patientData) {
      this.patientInfo = JSON.parse(decodeURIComponent(options.patientData));
    }

    // 设置当前年份
    const currentYear = new Date().getFullYear();
    this.selectedYear = currentYear.toString();
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    onYearChange(e) {
      this.selectedYear = e.detail.value;
      // 这里可以根据年份加载对应的历史记录
    },
    toggleRecord(index) {
      this.recordList[index].expanded = !this.recordList[index].expanded;
    },
  },
};
</script>

<style lang="scss" scoped>
.patient-history-page {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 40rpx;

  // 顶部导航栏
  .top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40rpx;
    z-index: 999;

    .header-left {
      display: flex;
      align-items: center;
      cursor: pointer;

      .back-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 12rpx;
      }

      text {
        font-size: 28rpx;
        color: #ffffff;
      }

      &:active {
        opacity: 0.7;
      }
    }

    .header-center {
      flex: 1;
      text-align: center;

      .page-title {
        font-size: 36rpx;
        color: #ffffff;
        font-weight: bold;
      }
    }

    .header-right {
      width: 80rpx;
    }
  }

  // 患者信息卡片
  .patient-info-card {
    margin: 140rpx 40rpx 20rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);

    .card-header {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .department-tag {
        background: #10b981;
        color: #ffffff;
        padding: 6rpx 18rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;

        text {
          font-size: 24rpx;
        }
      }

      .patient-basic {
        display: flex;
        align-items: center;

        .name {
          font-size: 30rpx;
          color: #333333;
          font-weight: bold;
          margin-right: 20rpx;
        }

        .gender-age {
          font-size: 26rpx;
          color: #666666;
        }
      }
    }

    .info-row {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 12rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        font-size: 24rpx;
        color: #999999;
        margin-right: 8rpx;
      }

      .value {
        font-size: 24rpx;
        color: #333333;
        margin-right: 24rpx;
      }
    }
  }

  // 年份选择器
  .year-selector {
    margin: 0 40rpx 20rpx;
    background: #ffffff;
    border-radius: 12rpx;
    padding: 16rpx 24rpx;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

    .year-picker {
      display: flex;
      align-items: center;

      .calendar-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 12rpx;
      }

      text {
        font-size: 28rpx;
        color: #333333;
        font-weight: 500;
        margin-right: 8rpx;
      }

      .arrow-icon {
        width: 28rpx;
        height: 28rpx;
      }
    }
  }

  // 历史记录列表
  .history-list {
    padding: 0 40rpx;

    .timeline-item {
      display: flex;
      margin-bottom: 40rpx;
      position: relative;

      .timeline-date {
        width: 180rpx;
        flex-shrink: 0;
        position: relative;
        padding-top: 8rpx;

        .date {
          font-size: 26rpx;
          color: #666666;
          display: block;
          text-align: left;
          line-height: 1.5;
        }

        .dot {
          position: absolute;
          right: -4rpx;
          top: 12rpx;
          width: 20rpx;
          height: 20rpx;
          background: #09b846;
          border-radius: 50%;
          border: 3rpx solid #ffffff;
          box-shadow: 0 0 0 2rpx #09b846;
          z-index: 2;
        }

        // 连接线
        &::after {
          content: "";
          position: absolute;
          right: 8rpx;
          top: 32rpx;
          width: 3rpx;
          height: calc(100% + 40rpx);
          background: #02bf57;
          z-index: 1;
        }
      }

      // 最后一个不显示连接线
      &:last-child .timeline-date::after {
        display: none;
      }

      .record-card {
        flex: 1;
        background: #ffffff;
        border-radius: 12rpx;
        padding: 24rpx;
        margin-left: 24rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);

        .record-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 12rpx;

          .record-info {
            flex: 1;
            display: flex;
            align-items: center;

            .recorder {
              font-size: 26rpx;
              color: #333333;
              margin-right: 40rpx;
            }

            .time {
              font-size: 26rpx;
              color: #999999;
            }
          }

          .expand-icon {
            width: 32rpx;
            height: 32rpx;
            transition: transform 0.3s;
            flex-shrink: 0;
            margin-left: 16rpx;

            &.expanded {
              transform: rotate(180deg);
            }
          }
        }

        .record-content {
          padding-top: 16rpx;
          border-top: 1rpx solid #f0f0f0;

          .content-label {
            font-size: 24rpx;
            color: #999999;
            margin-bottom: 12rpx;
          }

          .content-text {
            font-size: 26rpx;
            color: #333333;
            line-height: 1.6;
            text-align: justify;
          }
        }
      }
    }
  }
}
</style>
